import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
import { ScreenshotsContext } from './Screenshot';
export default () => {
    const context = useContext(ScreenshotsContext);
    const { state, dispatch } = context;

    const [barState, setBarState] = useState({ x: 0, y: 0 });
    const barRef = useRef<HTMLDivElement>(null);

    const option = useMemo(() => {
        const { action } = state;
        if (!action) return null;
        if (typeof action.render !== 'function') return null;
        return <div className="screenshots-viewer-bar-options">{action.render()}</div>;
    }, []);

    const setPostion = useCallback(() => {
        const { viewer, height } = state;
        if (!viewer || !barRef.current) return;
        const { x2, y2 } = viewer;
        const { x, y } = barState;
        const { offsetWidth, offsetHeight } = barRef.current;
        let x1 = x2 - offsetWidth;
        let y1 = y2 + 10;
        if (x1 < 0) {
            x1 = 0;
        }
        if (y1 > height - offsetHeight) {
            y1 = y2 - offsetHeight - 10;
        }
        if (x === x1 && y === y1) return;
        setBarState({ x: x1, y: y1 })
    }, [state, barState]);

    return (
        <div ref={barRef} className="screenshots-viewer-bar" style={{}}>
            <div className="screenshots-viewer-bar-container">
                <div className="screenshots-viewer-bar-icons"></div>
            </div>
        </div>
    );
};
